<style type="text/css">
    .createSlideDiv {
        background-color: black;
        opacity: 0.8;
        color: snow;
        padding: 6px;
        font-size: 0.68em;
    }
    .createSlideDiv button {
        vertical-align: inherit;
    }
    .createSlideDiv input {
        color: initial;
    }
    .slidesDiv {
        background-color: black;
        opacity: 0.8;
        color: snow;
        padding: 10px;
        overflow-y: auto;
        text-align: center;
        height: 260px;
        font-size: 0.68em;
    }
    .slide {
        cursor: pointer;
        margin-bottom: 6px;
    }
    .activeSlide {
        box-shadow: 0 0 12px #ffffff;
        border-style: solid;
        border-width: thin;
        border-color: white;
    }
</style>

<h2>Work with Slides in a WebScene</h2>

<div class="web-gl-warning" ng-show="vm.showViewError">WebGL is not supported on your platform/browser.</div>

<div ng-hide="vm.showViewError" style="position:relative;">

    <esri-scene-view map="vm.map" on-load="vm.onViewLoaded" on-error="vm.onViewError"></esri-scene-view>

    <div class="createSlideDiv" ng-show="vm.sceneView">
        New slide: <input type="text" ng-model="vm.createSlideTitleInput" />
        <button ng-click="vm.onCreateClick()" class="btn btn-sm btn-default">Create</button>
    </div>

    <div class="slidesDiv" ng-show="vm.slides.length > 0">
        <div class="slide" ng-repeat="slide in vm.slides" ng-click="vm.onSlideClick(slide)">
            <div>{{slide.title.text}}</div>
            <img src="{{slide.thumbnail.url}}" title="{{slide.title.text}}" ng-class="{activeSlide: slide.isActiveSlide}">
        </div>
    </div>

</div>

<p>Based on <a href="https://developers.arcgis.com/javascript/latest/sample-code/webscene-slides/index.html">this sample</a>.</p>
